<template>
  <div class="edit-form edit-dialog">
    
    <el-form ref="ruleFormRef" :model="form" :loading="loading" v-if="form.formArray && form.formArray.length > 0">
      <el-descriptions
        :column="2"
        border
        style="margin-bottom:10px"
        :colon="true"
        label-class-name="custom-description-label-160"
        v-for="(item, index) in form.formArray"
          :key="index"
      >
        <el-descriptions-item>
          <template #label>
            名称
          </template>
          <el-form-item :prop="'formArray.' + index + '.name'">
              <el-input
                disabled
                v-model="item.name"
                autocomplete="off"
                placeholder="请输入名称"
              />
            </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            编码
          </template>
          <el-form-item :prop="'formArray.' + index + '.code'">
              <el-input
                disabled
                v-model="item.code"
                autocomplete="off"
                placeholder="请输入编码"
              />
            </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            状态
          </template>
          <el-form-item
              :prop="'formArray.' + index + '.status'"
            >
              <pubDictSelect
              style="width:100%"
                v-model="item.status"
                dict-code="ZDZT"
                placeholder="请选择"
                :disabled="true"
              />
            </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            操作
          </template>
          <div>
            <el-button
              plain
              class="btn-form-del"
              type="danger"
              @click="del(item.id)"
            >
              删除
            </el-button>
          </div>
          </el-descriptions-item>
        </el-descriptions>
      <div >
     </div>
    </el-form>
    <div v-else>
        <el-empty description="暂无数据" />
      </div>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'edit'
}
</script>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPidChildrenDict, deleteDictById } from '@/api/system.js'
import { ref, reactive, onMounted } from 'vue'
const emit = defineEmits(['cancel'])
const props = defineProps({
  currentCode: {
    type: String,
    default: ''
  }
})
const form = reactive({
  formArray: []
})
const loading = ref(false)
const initDict = async () => {
  try {
    loading.value = true
    const res = await getPidChildrenDict({ id: props.currentCode })
    if (res.data && res.data.length > 0) {
      form.formArray = res.data
    } else {
      form.formArray = []
    }
    loading.value = false
  } catch (error) {
    loading.value = false
    console.log('error', error)
  }
}
onMounted(() => {
  initDict()
})

const delDict = index => {
  form.formArray.splice(index, 1)
}
const cancel = () => {
  emit('cancel', false)
}

// 删除字典
const del = id => {
  ElMessageBox.confirm('确定删除此字典吗，删除后将无法恢复?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    confirmButtonClass: 'btn-form-save',
    cancelButtonClass: 'btn-form-close',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteDictById(id)
      if (res.succeed) {
        initDict()
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
    })
    .catch(() => {})
}
</script>

<style scoped>
.el-row {
  height: 28px;
  align-items: center;
  margin-bottom: 15px;
}
.el-col {
  height: 28px;
}

.form-item-btn-group :deep(.el-form-item__content) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
